<template>
  <!-- 增加修改 -->
  <a-drawer width="35%" :label-col="4" :wrapper-col="14" :visible="open" @close="onClose">
    <a-divider orientation="left">
      <b>新增出库明细</b>
    </a-divider>
    <a-form-model ref="form" :model="form" :rules="rules">
     
      <a-form-item label="商品名称" prop="goodsname" :required="true">
        <a-tree-select
          v-model="form.goodsname"
          style="width: 100%"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="goodsListOptions"
          placeholder="请选择商品名称"
          :replace-fields="{ children: 'children', title: 'name', key: 'name', value: 'name' }"
          :filterTreeNode="customFilterNodeMethod"
          show-search
          :selectable=false
          tree-default-expand-all
          allow-clear
          >
  </a-tree-select>
      </a-form-item>



      <a-form-model-item label="数量"  prop="num">
        <a-input-number v-model="form.num" @change="onPriceChange" placeholder="请输入数量" 
          :formatter="(value) => `${value}`" 
          :precision="0" 
          :parser="(value) => value.replace('.', '')"
          style="width:100%" 
          :min="0" />

      </a-form-model-item>
      <a-form-model-item label="单价" prop="price">
        <a-input-number v-model="form.price" style="width:100%"  type="number"  @change="onPriceChange" placeholder="请输入单价" />
      </a-form-model-item>
      <a-form-model-item label="金额" prop="allprice">
        <a-statistic v-model="form.allprice" style="margin-right: 50px" :value-style="{ color: '#cf1322' }"></a-statistic>
      </a-form-model-item>



      
      <div class="bottom-control">
        <a-space>
          <a-button type="primary" @click="submitForm">
            保存
          </a-button>
          <a-button type="dashed" @click="cancel">
            取消
          </a-button>
        </a-space>
      </div>
    </a-form-model>
  </a-drawer>
</template>

<script>
import { listGoods } from '@/api/system/goods'
import pinyin from 'js-pinyin';
export default {
  name: 'CreateSubForm',
  props: {
  },
  components: {
  },
  data () {
    return {
      formTitle: '增加',
      // 表单参数
      form: {
        goodsname: undefined,

        num: undefined,

        price: undefined,

        allprice: undefined

      },
      // 商品列表
      goodsListOptions:[],
      open: false,
      rules: {
        goodsname: [
          { required: true, message: '商品名称不能为空', trigger: 'blur' }
        ],

        num: [
          { required: true, message: '数量不能为空', trigger: 'blur' }
        ],

        price: [
          { required: true, message: '单价不能为空', trigger: 'input' }
        ]

      }

    }
  },
  filters: {
  },
  created () {
    this.getGoodsList()
  },
  computed: {
  },
  watch: {
  },
  methods: {
    // 获取商品列表
    getGoodsList (){
      listGoods({}).then(response => {
        this.goodsListOptions = this.handleTree(response.data, 'id', 'parentId')
      })
    },

    
    customFilterNodeMethod(input, option) {
        // 获取选项的文本值
        const optionText = option.key.toLowerCase();
      // 将输入的内容转换为小写
      const inputValue = input.toLowerCase();
      // alert(this.isFirstLetterMatch(inputValue, optionText))
      // 判断输入内容是否匹配选项的汉字、首字母或拼音
      return (
        this.isMatch(optionText, inputValue) || // 匹配汉字
        this.isFirstLetterMatch(inputValue, optionText) || // 匹配首字母
        this.isPinyinMatch(inputValue, optionText) // 匹配拼音
      );

  },

    // 判断输入内容是否匹配选项的汉字
    isMatch(optionText, inputValue) {
      // 将选项文本转换为小写
      const text = optionText.toLowerCase();
      // 判断输入内容是否在选项文本中
      return text.includes(inputValue);
    },

    // 判断输入内容是否匹配选项的首字母
    isFirstLetterMatch(input, optionText) {
      // 将选项文本转换为小写
      const text = optionText.toLowerCase();
      // 将输入内容转换为小写
      const inputValue = input.toLowerCase();
      // 获取选项文本的每个字的首字母（不区分大小写）
      const firstLetters = text.split('').map(char => pinyin.getCamelChars(char)[0].toLowerCase()).join('');
      // 判断输入内容是否与选项文本的首字母匹配
      return firstLetters.includes(inputValue);
    },

    // 判断输入内容是否匹配选项的拼音
    isPinyinMatch(input, optionText) {
      // 将选项文本转换为拼音
      const pinyinText = pinyin.getFullChars(optionText).toLowerCase();
      // 将输入内容转换为拼音
      const pinyinInput = pinyin.getFullChars(input).toLowerCase();
      // 判断输入内容是否在选项文本的拼音中
      return pinyinText.includes(pinyinInput);
    },
    
    onClose () {
      this.open = false
    },
    // 取消按钮
    cancel () {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset () {
      this.form = {
        goodsname: undefined,

num: undefined,

price: undefined,

allprice: undefined

      }
    },


    // 
    onPriceChange (){
      if (this.form.num !== undefined && this.form.price !== undefined) {
    // 如果数量和价格都不为空
    if (!isNaN(this.form.num) && !isNaN(this.form.price)) {
      // 计算金额，并保留两位小数
      const allprice = (parseFloat(this.form.num) * parseFloat(this.form.price)).toFixed(2);
      // 更新表单中的金额字段
      this.form.allprice = allprice;
    }
  }
    },
     /** 新增按钮操作 */
    handleAdd () {
      this.open = true
      this.reset()
    },
    /** 提交按钮 */
    submitForm: function () {

      if(null==this.form.goodsname||this.form.goodsname==""){
          this.$message.error(
                '商品不能为空，请选择商品',
                4
              );
              return false
        }

      this.$refs.form.validate(valid => {
        if (valid) {
      this.$emit('add', this.form)
      this.open = false
        }
      })
    }
  }
}
</script>
